import React, { Component } from 'react'
import { View, Image, Text, Canvas } from '@tarojs/components'
import { getLocation, downloadFile } from '@tarojs/taro'
import {
  GET_TIAN_QI,
  GET_TIAN_QI_NOW,
  GET_DAY_CALENDAR,
  GET_DAY_CALENDAR_EX,
  GET_DAY_CALENDAR_HOUR,
  GET_DAY_ONE_WORD,
  GET_SUGGEST,
  formatTime
} from '../../api'
import { getLunarDate } from '../../api/calendar'
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.scss'
import filePath from "../../assets/bgc.jpg"
// import filePath from "../../assets/bgc.jpg"
import codeImg from "../../assets/codeImg.jpg"


// const barChart = React.createRef();
export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      d: {},
      shareData: {},

    }
    // const _that=this
  }
  /* 图片加载时 页面加载主图时触发
   <image src="{{item}}" class="img" mode="widthFix" bindload="onSwiperLoad"></image>
  */
  onImgLoad(e) {
    console.log(e);
    let oImgW = e.detail.width; //图片原始宽度
    let oImgH = e.detail.height; //图片原始高度
    let imgWidth = 750; //图片设置的宽度
    let scale = imgWidth / oImgW; //比例计算
    let imgHeight = oImgH * scale;
    console.log(scale, imgHeight);
    this.setState({
      swiperHeight: imgHeight,
    })
  }
  getSysInfo() {
    /*获取手机宽高*/
    let that = this
    let imgUrl = "https://media.gzwrkj.cn/image/sunny_day.jpg"
    // filePath
    let qrcodeUrl = codeImg
    wx.getSystemInfo({
      success(res) {
        console.log(res, 'skdjfsjddjdjdjd');
        that.setState({
          _width: res.windowWidth,
          _heigth: res.windowHeight,
          canvasType: true,
        })
        // 获取图片信息生成canvas
        // that.getImginfo([imgUrl, qrcodeUrl], 0);
      }
    })
  }
  // 获取图片信息
  getImginfo(urlArr, _type) {
    let that = this;
    wx.getImageInfo({
      src: urlArr[_type], //服务器返回的带参数的小程序码地址
      success: function (res) {
        console.log(res, '---------res2');
        //res.path是网络图片的本地地址
        if (_type === 0) { //商品图片
          that.setState({
            localImageUrl: res.path,
          })
          that.getImginfo(urlArr, 1)
        } else {
          that.setState({ //二维码
            localCodeUrl: res.path,
            loadType: true,
          })
          // 创建canvas图片
          that.createNewImg();
        }
      },
      fail: function (res) {
        //失败回调
        console.log('错误-res', _type, res)
      }
    });
  }
  getToday() {
    GET_DAY_CALENDAR().then(res => {
      console.log(res);
      if (res.code == '000000') {
        let d = res.data
        d.today = formatTime(new Date())
        d.days = new Date().getDate()
        this.setState({
          d
        })
        // this.getSysInfo()
      }
    })
    GET_DAY_ONE_WORD().then(res => {
      console.log(res);
      if (res.code == '000000') {
        let shareData = res.data
        this.setState({
          shareData
        })
        // this.getSysInfo()
      }
    })
  }

  //点击保存到相册
  saveImg() {
    console.log(this.state.loadImagePath, '---');
    wx.saveImageToPhotosAlbum({
      filePath: this.state.loadImagePath,
      success(res) {
        console.log('res', res);
        wx.showToast({
          title: '已保存到相册',
          icon: 'success',
          duration: 3000
        })
      },
      fail(err) {
        console.log('err', err);

      }
    })
  }



  componentDidMount() {

    this.getToday()
  }




  render() {
    let d = this.state.d,
      shareData = this.state.shareData
    return (
      <View className='bgcPage' onClick={() => this.saveImg()}>

        <View className='everyDayBgc' >
          <Image className="codeImg" src={shareData.image} mode="aspectFill"></Image>
          {/* <View className='toTop' onClick={() => this.toTop()}> 收起 ^ </View> */}
          <View className='everyDay' >
            <View className='td'>{d.days}<Text className='wdays'>{d.weekday}</Text></View>
            <View>{d.lunar}  {d.holiday}</View>
            <View>{d.lunarYear}属{d.animalsYear}</View>
          </View>
          <View className='niceWord' >
            {shareData.translation}
          </View>
          {/* <Image className="code" src={codeImg} mode="aspectFill"></Image> */}
        </View>
        {/* hidden={canvasHidden} */}
        {/* <Canvas canvas-id='mycanvas' className='canvas' hidden={true}></Canvas > */}
        {/* <Image src={shareTempFilePath}  className="showImg" ></Image> */}
      </View>
    )
  }
}
